<template>
    <div class="info-con" style="display: flex;justify-content: space-between;">
      <ul class="left" style="display: block;">
        <span v-html="modifyString(props.InfoMessage.banner)"></span>
        <!-- <span>{{ modifyString(props.InfoMessage.banner) }}</span> -->
      </ul>
    </div>
</template>
<script setup lang="ts">
const props = defineProps({
  InfoMessage: { type: Object, required: true }
})
const modifyString = (Str: string) => {
  return Str
    .replace(/^["<br> \n\r]+|["\n\r]+$/g, '')
    .replace(/^\\n/g, '')
    .replace(/(?:\\r\\n|\\r|\\n)+/g, '<br>')
    .replace(/\\"|\\/g, '')
    .replace(/: <br> /g, ':')
};
</script>

<style scoped lang="scss">
.info-con {
  margin-top: 3px;
  display: flex;
  .left{
    flex: 3;
    // background-color: var(--el-color-info-light-9);
    color: var(--el-text-color-regular);
  }
  .right{
    flex: 7;
    box-sizing: content-box;
    border: 2px solid var(--el-color-info-light-9);
    color: var(--el-text-color-regular);
    .banner-top{
      border-bottom: 2px solid var(--el-color-info-light-9);
    }
    .banner-text{}
  }
}
</style>
